import React, { Component } from "react";
import { message, Modal, Button, Input } from "antd";
import request from "../../utils/request";

class CodeValid extends Component {
  constructor(props) {
    super(props);
    this.state = {
      code: "",
      number: 90,
      disabled: false
    };
  }

  handleCancel = () => {
    const { onCancel } = this.props;
    onCancel && onCancel();
  };

  handleOk = () => {
    const { code } = this.state;
    const { onOk } = this.props;
    if (/^\d{6}$/.test(code)) {
      request("/user/googleValid", {
        body: { code }
      }).then(json => {
        if (json.code === 10000000) {
          message.success("谷歌验证成功！");
          onOk && onOk();
        } else {
          message.destroy();
          message.error(json.msg);
        }
      });
    } else {
      message.destroy();
      message.warn("请输入6位数字验证码");
    }
  };

  //发送手机短信
  sendMobileSms = () => {
    request("/user/mobile/sendMobileSms", {
      method: "POST",
      body: {
        smsType: "ex_mobile"
      }
    }).then(json => {
      if (json.code === 10000000) {
        this.countDown();
        message.success(json.msg);
      } else {
        message.destroy();
        message.error(json.msg);
      }
    });
  };

  getCode = () => {
    const { exValidType } = this.props;
    if (exValidType*1 === 3) {
      this.sendMobileSms();
    } else if (exValidType*1 === 4) {
      this.sendMail();
    }
  };

  countDown = () => {
    this.setState({ disabled: true });
    this.timer = setInterval(() => {
      let { number } = this.state;
      if (number === 0) {
        clearInterval(this.timer);
        this.setState({
          number: 90,
          disabled: false
        });
      } else {
        this.setState({ number: number - 1 });
      }
    }, 1000);
  };

  //发送邮箱验证码
  sendMail = () => {
    request("/user/mail/sendMail", {
      method: "POST",
      body: {
        smsType: "ex_mail"
      }
    }).then(json => {
      if (json.code === 10000000) {
        this.countDown();
        message.success(json.msg);
      } else {
        message.destroy();
        message.error(json.msg);
      }
    });
  };

  codeOnchange = e => {
    this.setState({ code: e.target.value });
  };

  render() {
    const { code, disabled, number } = this.state;
    const { exValidType } = this.props;
    const title = exValidType*1 === 3 ? "手机验证" : "邮箱验证";
    return (
      <Modal
        title={title}
        visible={true}
        wrapClassName="v-center-modal"
        maskClosable={false}
        width={400}
        footer={null}
        onCancel={this.handleCancel}
      >
        <div className="google-popup">
          <div style={{ display: "flex" }}>
            <Input
              size="large"
              value={code}
              placeholder={`请输入${title}码`}
              onChange={this.codeOnchange}
            />
            <Button
              disabled={disabled}
              onClick={this.getCode}
              type="primary"
              size="large"
              style={{ width: 120 }}
            >
              {!disabled ? "获取验证码" : number + "S"}
            </Button>
          </div>

          <div className="google-btn">
            <Button type="normal" onClick={this.handleCancel}>
              取消
            </Button>
            <Button onClick={this.handleOk} type="primary">
              确定
            </Button>
          </div>
        </div>
      </Modal>
    );
  }
}

export default CodeValid;
